import styles from './index.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Divider, Tooltip } from 'antd';

export default ({ data, isMonth, marketId = null }) => {
  const renderItem = (values, index) => {
    const SOptions = ['市场运营', '不平衡', '其它']; //甘肃特殊项
    const isSpecial = SOptions.includes(values.label);
    const isLast = index === data.length - 1;
    const showDriver = isSpecial || isLast; // 特殊项 || 最后一项 不展示分割线

    const render = (key) => {
      switch (key) {
        case '现货考核':
          return (
            <div className={styles.container_right_one}>
              <div className={styles.income}>考核电价</div>
              <div className={styles.unit}>
                <span>{values.price || '-'}</span>
                <label>元/MWh</label>
              </div>
            </div>
          );
        case '偏差考核':
          return (
            <div className={styles.container_right_one}>
              <div className={styles.income}>电量</div>
              <div className={styles.unit}>
                <span>{values.quantity || '-'}</span>
                <label>MWh</label>
              </div>
            </div>
          );
        case '现货合计':
          return (
            <>
              <div className={styles.container_right}>
                <div className={styles.quantity}>电量</div>
                <div className={styles.quantity_unit}>
                  <span>{values.quantity || '-'}</span>
                  <label>MWh</label>
                </div>
                <div className={styles.price}>正电价</div>
                <div className={styles.price_unit}>
                  <span>{values.price || '-'}</span>
                  <label>元/MWh</label>
                </div>
              </div>
              <div className={styles.container_right}>
                <div className={styles.quantity}> </div>
                <div className={styles.quantity_unit}>
                  <span> </span>
                  <label> </label>
                </div>
                <div className={styles.price}>负电价</div>
                <div className={styles.price_unit}>
                  <span>{values.negativePrice || '-'}</span>
                  <label>元/MWh</label>
                </div>
              </div>
            </>
          );
        case '现货':
          if (isMonth) {
            return (
              <>
                <div className={styles.container_right}>
                  <div className={styles.quantity}>正电量</div>
                  <div className={styles.quantity_unit}>
                    <span>{values.spotPositiveQuantity || '-'}</span>
                    <label>MWh</label>
                  </div>
                  <div className={styles.price}>正电价</div>
                  <div className={styles.price_unit}>
                    <span>{values.spotPositivePrice || '-'}</span>
                    <label>元/MWh</label>
                  </div>
                </div>
                <div className={styles.container_right}>
                  <div className={styles.quantity}>负电量</div>
                  <div className={styles.quantity_unit}>
                    <span>{values.spotNegativeQuantity || '-'}</span>
                    <label>MWh</label>
                  </div>
                  <div className={styles.price}>负电价</div>
                  <div className={styles.price_unit}>
                    <span>{values.spotNegativePrice || '-'}</span>
                    <label>元/MWh</label>
                  </div>
                </div>
              </>
            );
          }
        default:
          return (
            <div className={styles.container_right}>
              <div className={styles.quantity}>电量</div>
              <div className={styles.quantity_unit}>
                <span>{values.quantity || '-'}</span>
                <label>MWh</label>
              </div>
              <div className={styles.price}>电价</div>
              <div className={styles.price_unit}>
                <span>{values.price || '-'}</span>
                <label>元/MWh</label>
              </div>
            </div>
          );
      }
    };
    return (
      <>
        <div
          className={styles.container}
          // style={{ width: isSpecial ? 81 : isLonger ? 240 : 330 }}
        >
          <div className={styles.container_left}>
            {/* <h3>{values.label}</h3> */}

            <div className={styles.container_name}>
              <span>{values.label}</span>
              {marketId === 'PDBLJ' && values.sort === 1 && (
                <span className={styles.icon_img}>
                  <Tooltip title="收入合计为综合电费、中长期合约阻塞与省间省内价差费用之和">
                    <QuestionCircleOutlined />
                  </Tooltip>
                </span>
              )}
            </div>
            <div className={styles.income}>
              {values.label !== '现货考核'
                ? values.label === '偏差考核'
                  ? '费用'
                  : '收入'
                : '考核电费'}
            </div>
            <div className={styles.unit}>
              <span>{values.income || '-'}</span>
              <label>万元</label>
            </div>
          </div>
          {!isSpecial ? render(values.label) : ''}
        </div>
        {!showDriver && (
          <Divider
            type="vertical"
            style={{ height: 50, borderLeft: '1px solid rgba(255, 255, 255, 0.3)' }}
          />
        )}
      </>
    );
  };
  return (
    <>
      {data.map((item, index) => {
        return <>{renderItem(item, index)}</>;
      })}
    </>
  );
};
